<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>优呗小店</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/login_index.css" />
	</head>

	<body>
		<!--启动页开始-->
		<div class="web">
			<!--背景图-->
			<div class="bg"></div>
			<!--中间logo和标题-->
			<div class="logo_all">
				<div class="logo">
					<img src="images/logo.png" />
				</div>
				<div class="name">
					<img src="images/name.png" />
				</div>
				<div class="logo_title">
					<img src="images/logo_title.png" />
				</div>
				<div class="line">
					<img src="images/line.png" />
				</div>
			</div>
			<!--登陆和注册按钮-->
			<div class="login_and_registration">
				<div class="login">
					登陆
				</div>
				<div class="registration">
					注册
				</div>
			</div>
		</div>
		<!--登陆页-->
		<div class="web2">
			<!--头部-->
			<header>
				<div class="cancel">
					取消
				</div>
				<div class="title">
					登陆
				</div>
			</header>

			<!--中间内容部分-->
			<section>
				<!--中间logo和标题-->
				<div class="logo_all2">
					<div class="logo2">
						<img src="images/logo.png" />
					</div>
					<div class="name2">
						<img src="images/name.png" />
					</div>
					<div class="logo_title2">
						<img src="images/logo_title.png" />
					</div>
					<div class="line2">
						<img src="images/line.png" />
					</div>
				</div>
				<!--输入框-->
				<form action="" method="post">
					<div class="input_box">
						<div class="account">
							<span>账号</span>
							<input type="number" placeholder="请输入手机号" />
						</div>
						<div class="password">
							<span>密码</span>
							<input type="password" placeholder="请输入密码" />
						</div>
					</div>
					<!--登陆-->
					<div class="enter">
						登陆
					</div>
					<!--注册用户和忘记密码-->
					<div class="register_and_forget">
						<span class="regi">注册用户</span>
						<span class="forget">忘记密码</span>
					</div>
					<!--密码错误-->
					<div class="mistake">
						<div class="close_box"><i class="iconfont icon-error"></i></div>
						<div class="mistake_box">
							<i class="iconfont icon-kulian"></i>
							<p>密码不正确！</p>
						</div>
					</div>
				</form>
			</section>

			<!--尾部-->
			<footer>
				<div class="wechat">
					<i class="iconfont icon-wechat"></i>
					<span>微信登陆</span>
				</div>
				<div class="QQ">
					<i class="iconfont icon-QQ"></i>
					<span>QQ登陆</span>
				</div>
			</footer>
		</div>
		<!--注册页-->
		<div class="web3">
			<!--头部-->
			<header>
				<div class="cancel">
					取消
				</div>
				<div class="title">
					注册
				</div>
			</header>
			<!--内容-->
			<section>
				<form action="" method="post">
					<div class="phone">
						<span>手机号码</span>
						<input type="number" placeholder="请输入手机号码" />
					</div>
					<div class="code_box">
						<div class="code">
							<span>验证码</span>
							<input type="text" placeholder="请输入验证码" />
						</div>
						<div class="gain">
							获取验证码
						</div>
					</div>
					<div class="details">
						<div class="nickname">
							<span>个人昵称</span>
							<input type="text" placeholder="请输入个人昵称" />
						</div>
						<div class="nickname">
							<span>设置密码</span>
							<input type="text" placeholder="8-20位数字和字母组合" />
						</div>
						<div class="nickname">
							<span>确认密码</span>
							<input type="text" placeholder="请重复输入密码" />
						</div>
					</div>
				</form>
				<!--协议-->
				<div class="agreement">
					<div class="agree">
						<i class="iconfont icon-duihao"></i>
					</div>
					<p>我已阅读并接受<span>优呗小店用户注册协议</span></p>
				</div>
				<!--完成-->
				<div class="accomplish">
					完成
				</div>
			
				<!--验证码发送成功-->
				<div class="send">
					<div class="close_box">
						<i class="iconfont icon-error"></i>
					</div>
					<div class="send_success">
						<i class="iconfont icon-xiaolian"></i>
						<p>验证码已发送</p>
					</div>
						
				</div>
			</section>

		</div>
		<!--创建微小店-->
		<div class="web4">
		<!--头部-->
			<header>
				<div class="cancel">
					取消
				</div>
				<div class="title">
					创建微小店
				</div>
			</header>
				<!--内容-->
			<section>
				<div class="found">
					<form action="">
						<div class="found_box">
							<span>店铺名称</span>
							<input type="text" placeholder="请输入店铺名称，如某某小店"/>
						</div>
						<div class="open">
							立即开店
						</div>						
						
					</form>
					
					
				</div>
				
				
			</section>
			
			
			
			
		</div>
		<!--忘记密码-->
		<div class="web5">
			<!--头部-->
			<header>
				<div class="cancel">
					取消
				</div>
				<div class="title">
					设置新密码
				</div>
			</header>
				<section>
				<form action="" method="post">
					<div class="phone">
						<span>手机号码</span>
						<input type="number" placeholder="请输入手机号码" />
					</div>
					<div class="code_box">
						<div class="code">
							<span>验证码</span>
							<input type="text" placeholder="请输入验证码" />
						</div>
						<div class="gain">
							获取验证码
						</div>
					</div>
					<div class="details">
						<div class="nickname">
							<span>设置密码</span>
							<input type="text" placeholder="8-20位数字和字母组合" />
						</div>
						<div class="nickname">
							<span>确认密码</span>
							<input type="text" placeholder="请重复输入密码" />
						</div>
					</div>
				</form>
				<!--完成-->
				<div class="accomplish">
					完成
				</div>
			
				<!--验证码发送成功-->
				<div class="send">
					<div class="close_box">
						<i class="iconfont icon-error"></i>
					</div>
					<div class="send_success">
						<i class="iconfont icon-xiaolian"></i>
						<p>验证码已发送</p>
					</div>
						
				</div>
			</section>
		</div>
		
		
		
		
		
		
	</body>
	<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var div = document.querySelectorAll(".login_and_registration div[class]");
		for(let i = 0; i < div.length; i++) {
			div[i].addEventListener("click", function() {
				for(var j = 0; j < div.length; j++) {
					div[j].classList.remove("active");
				}
				div[i].classList.add("active");
			})
		}
		</script>
		<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
</html>